import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    redirect: { name: 'TableTool' },
    component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue'),
    meta: { title: 'Home' },
    children: [
      {
        path: 'tableTool',
        name: 'TableTool',
        component: () => import(/* webpackChunkName: "tableTool" */ '../views/antDemo/tableTool/TableTool.vue'),
        meta: { title: '表格工具' }
      },
      {
        path: 'dzDemo',
        name: 'DzDemo',
        component: () => import(/* webpackChunkName: "dzDemo" */ '../views/dzUI/dzDemo/DzDemo.vue'),
        meta: { title: 'dz-ui demo' }
      },
      {
        path: 'teleportDemo',
        name: 'TeleportDemo',
        component: () => import(/* webpackChunkName: "teleportDemo" */ '../views/learningVue/teleport/TeleportDemo.vue'),
        meta: { title: 'teleport demo' }
      },
      {
        path: 'scopeSlot',
        name: 'ScopeSlot',
        component: () => import(/* webpackChunkName: "scopeSlot" */ '../views/learningVue/scopeSlot/ScopeSlotDemo.vue'),
        meta: { title: '插槽用法初探' }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to) => {
  sessionStorage.setItem('selectedKeys', typeof to.name === 'string' ? to.name : '')
  NProgress.start()
})

router.afterEach(() => {
  NProgress.done()
})

export default router
